<template>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" :width="svgConfig.width" :height="svgConfig.height" :style="{backgroundColor:svgConfig.background}">
    <starSvg v-svgResize="{type:'element',pos:item,D2:D2,index:i}" v-svgDrag="{type:'element',pos:item,D2:D2,index:i}" v-for="(item,i) in svgConfig.element" :key="i" :x="item.x" :y="item.y" :config="item.config" :transform="`scale(${item.scaleX},${item.scaleY})`"></starSvg>
    <guideSvg v-for="(lineItem,j) in baseline" :key="'line'+j" :config="lineItem"></guideSvg>
    <lampSvg v-svgDrag="{type:'lamp',pos:la,D2:D2,index:k}" v-if="!!lamp&&lamp.length>0" v-for="(la,k) in lamp" :key="'lamp'+k" :config="la" :signal="signal"></lampSvg>
    <connectSvg v-svgDrag="{type:'connect',pos:ro,D2:D2,index:m}" v-if="!!connect&&connect.length>0" v-for="(ro,m) in connect" :key="'roll'+m" :config="ro"></connectSvg>
    <textSvg v-svgDrag="{type:'text',pos:tx,D2:D2,index:l}" v-if="!!text&&text.length>0" v-for="(tx,l) in text" :key="'text'+l" :config="tx"></textSvg>
    <signalTextSvg v-svgDrag="{type:'signalText',pos:te,D2:D2,index:k}" v-if="!!signalText&&signalText.length>0" v-for="(te,k) in signalText" :key="'signalText'+k" :config="te" :signal="signal"></signalTextSvg>
  </svg>
</template>

<script>
import starSvg from "../svg/starSvg";
import guideSvg from "../svg/guideSvg";
import lampSvg from "../svg/lampSvg";
import textSvg from "../svg/textSvg";
import signalTextSvg from "../svg/signalTextSvg";
import connectSvg from "../svg/connectSvg";
// import request from "../api";
// import bslRequest from "../bslApi";
export default {
  name: "d2Chart",
  components:{
    starSvg,
    guideSvg,
    lampSvg,
    textSvg,
    signalTextSvg,
    connectSvg
  },
  directives: {
    svgDrag: {
      // 指令的定义
      inserted: function (el,binding) {
        el.addEventListener('mousedown',(e)=>{
          if(e.ctrlKey){
            return;
          }
          let pos=binding.value.pos;
          if (e.preventDefault) {
            e.preventDefault();
          } else{
            e.returnValue=false;
          };//解决快速拖动滞后问题
          document.onmousemove = function (e) {
            if(binding.value.type==='connect'){
              pos.x1=pos.x1+e.movementX;
              pos.y1=pos.y1+e.movementY;
              pos.x2=pos.x2+e.movementX;
              pos.y2=pos.y2+e.movementY;
            }else{
              pos.x=pos.x+e.movementX;
              pos.y=pos.y+e.movementY;
            }
          }
          document.onmouseup = function () {
            if(binding.value.type==='connect'){
              binding.value.D2[binding.value.type][binding.value.index].x1=pos.x1;
              binding.value.D2[binding.value.type][binding.value.index].y1=pos.y1;
              binding.value.D2[binding.value.type][binding.value.index].x2=pos.x2;
              binding.value.D2[binding.value.type][binding.value.index].y2=pos.y2;
            }else{
              binding.value.D2[binding.value.type][binding.value.index].x=pos.x;
              binding.value.D2[binding.value.type][binding.value.index].y=pos.y;
            }
            document.onmousemove = document.onmouseup = null;
          }
        })
      }
    },
    svgResize:{
      inserted: function (el,binding) {
        el.addEventListener('mousemove',(e)=>{
          let pos = binding.value.pos;
          let {left, top, right, bottom} = el.getBoundingClientRect();
          // if (e.pageX < right && e.pageX > right - 5 && (e.pageY < bottom && e.pageY > bottom - 5)&&!!e.ctrlKey) {
          if (!!e.ctrlKey) {
            el.style.cursor = 'se-resize';
            el.onmousedown = function (e) {
              if (!e.ctrlKey) {
                return;
              }
              let distX = e.pageX;
              let distY = e.pageY;
              let w = right - left;
              let h = bottom - top;
              let ratioX = pos.scaleX;
              let ratioY = pos.scaleY;
              document.onmousemove = function (e) {
                pos.scaleX = ratioX * (w + e.pageX - distX) / w;
                pos.scaleY = ratioY * (h + e.pageY - distY) / h;
              }
              document.onmouseup = function () {
                binding.value.D2[binding.value.type][binding.value.index].scaleX = pos.scaleX;
                binding.value.D2[binding.value.type][binding.value.index].scaleY = pos.scaleY;
                el.style.cursor = 'auto';
                el.onmousedown=el.onmouseup = document.onmousemove = document.onmouseup = null;
              }
            }
          }else{
            el.style.cursor = 'auto';
          }
        })
      }
    }
  },
  data(){
    return {
      svgConfig:{},
      baseline:[],
      lamp:[],
      connect:[],
      text:[],
      signalText:[],
      timer:null,
      dur:null,
      signal:{
        mark1:'red',
        textMark1:'10002'
      }
    }
  },
  props:{
    D2:{
      default:()=>{
        return {}
      }
    },
    elements:{
      default:()=>{
        return []
      }
    },

  },
  watch:{
    D2: {
      handler(newName, oldName) {
        this.handleSvgList(newName)
      },
      immediate: true,
      deep: true
    },
    svgConfig:function(val){
      // console.log(val)
    },
    elements: {
      handler(newName, oldName) {
        this.handleSvgList(this.D2)
      },
      immediate: true,
      deep: true
    },
  },
  mounted() {
    this.handleSvgList(this.D2)
  },
  methods:{
    async handleSvgList(D2){
      this.svgConfig={
        width:D2.width,
        height:D2.height,
        background:D2.background,
        element:[],
      }
      for(let i=0;i<D2.element.length;i++){
        let item={
          name:D2.element[i].name,
          x:D2.element[i].x,
          y:D2.element[i].y,
          scaleX:D2.element[i].scaleX,
          scaleY:D2.element[i].scaleY,
          config:{}
        };
        // await request('twinsInstance/findEntity',D2.element[i].name).then(data=>{
        //   item.config=data.web.D2;
        // })
        let element=this.elements.find(item=>item.className===D2.element[i].name);
        if(!!element){
          item.config=element.web.D2
          this.svgConfig.element.push(item)
        }
      };
      this.handleBaseline();
      this.handleLamp();
      this.handleConnect();
      this.handleText();
      this.handleSignalText();
      // this.handleTimer();
    },
    handleBaseline(){
      if(!!this.D2.baseline){
        this.baseline=this.D2.baseline.filter(item=>item.enable==true);
      }
    },
    handleLamp(){
      if(!!this.D2.lamp){
        this.lamp=this.D2.lamp;
      }
    },
    handleConnect(){
      if(!!this.D2.connect){
        this.connect=this.D2.connect;
      }
    },
    handleText(){
      if(!!this.D2.text){
        this.text=this.D2.text;
      }
    },
    handleSignalText(){
      if(!!this.D2.signalText){
        this.signalText=this.D2.signalText;
      }
    },
    handleTimer(){
      let _this=this;
      if(!!this.D2.timer){
        let timer=()=>{
          let map={};
          bslRequest('timer/create',this.D2.timer).then(timeObject=>{
            map=timeObject.handle();
            Object.keys(map).map(item=>{
              _this.$set(_this.signal,item,map[item])
            })
          })
          // let c=_this.signal.mark1;
          // let newC=null;
          // let color=_this.D2.lamp[0].mark;
          // color.map((item,i)=>{
          //   if(item===c){
          //     if(i===color.length-1){
          //       newC=color[0]
          //     }else{
          //       newC=color[i+1]
          //     }
          //     return;
          //   }
          // })
          // _this.$set(_this.signal,'mark1',newC)
        };
        setInterval(timer,parseInt(this.D2.dur)*1000)
      }
    }
  }
}
</script>

<style scoped>

</style>